<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-06 17:09:21
-->
<template>
  <div>
    <div class="header">
      <div>
        <a href="/#/home">建党百年</a>
      </div>
      <div>
        <img src="../assets/yxtx/phone.png" alt="图片加载失败" />
        联系我们
      </div>
    </div>
    <div class="content">
      <div class="title">{{ this.article.title }}</div>
      <div class="author">作者：{{ this.article.baseUser.username }}</div>
      <div class="introduce" v-html="this.article.content"></div>
    </div>
    <div class="back">
      <el-button type="primary" plain @click="goBackHandler">返回</el-button>
    </div>
    <div class="footer"><strong>&copy;2021课设- 713 AND LU</strong></div>
  </div>
</template>
<script>
import request from "../utils/request";
import moment from "moment";
export default {
  data() {
    return {
      id: null,
      article: [],
    };
  },
  methods: {
    findArticleById() {
      request.get("/index/article/findById?id=" + this.id).then((res) => {
        this.article = res.data;
      });
    },
    goBackHandler() {
      this.$router.go(-1);
    },
  },
  created() {
    this.id = this.$route.query.id;
    // console.log(id)
    this.findArticleById(this.id);
  },
};
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: black;
}
.header {
  height: 100px;
  box-shadow: 0px 0px 5px 1px #333;
  display: flex;
}
.header div {
  height: 100px;
  width: 200pd;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}
.header div:first-child {
  font-size: 40px;
  flex: 1;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.header div:last-child {
  font-size: 24px;
  padding-right: 20px;
  text-align: right;
  flex: 4;
}
.header img {
  height: 25px;
  width: 25px;
}
.content {
  margin: 0px 100px;
  font-size: 15px;
  text-indent: 30px;
  line-height: 22px;
}
.title {
  height: 30px;
  line-height: 30px;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 10px;
}
.author {
  text-align: center;
  margin-bottom: 20px;
}
.back {
  margin-top: 20px;
  text-align: center;
}
.footer {
  text-align: center;
  text-align: middle;
  overflow: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 20px;
  box-shadow: 0px 0px 5px 1px #333;
}
</style>